{% extends "school/layout.html" %}

{% set page_title = translate('教师账号管理') %}

{% block content %}
<style>
    .tips{
        text-align: center;
        color: red;
        line-height: 1.5;
        margin-bottom: 10px;
    }
</style>
<div class="m-student-list">
<div class="m-fixed-table-top">
    <div class="title">
        <div class="name">{{translate('教师列表')}}</div>
        <p class="text">{{translate('教师数量')}}：{{pagination.total}}{{translate('个')}}</p>
    </div>
    <div class="toolbars">
        <select class="tselect" id="teacherselect">
            <option value="all" {% if stat == 'all' %} selected {% endif %} >{{translate('全部')}}</option>
            <option value="onboard" {% if stat == 'onboard' %} selected {% endif %} >{{translate('在职')}}</option>
            <option value="deleted" {% if stat == 'deleted' %} selected {% endif %} >{{translate('删除')}}</option>
        </select>
        <span class="new" id="createnew">{{translate('新建')}}</span>
        <span class="del disabled" id="deleteall">{{translate('批量删除')}}</span>
    </div>
</div>
<table class="table table-condensed table-striped table-bordered teachers m-ul-table">
    <thead>
        <tr class="header">
            <th class="cell cell-checkbox"><div class="th-inner"><input type="checkbox" {% if stat == "deleted" %}disabled{% endif %}></div></th>
            <th>{{translate('教师姓名')}}</th>
            <th>{{translate('昵称')}}</th>
            <th>{{translate('用户名')}}</th>
            <th>{{translate('状态')}}</th>
            <th>{{translate('手机号码')}}</th>
            {% if not in_user_verify_whitelist %}
            <th>{{translate('身份验证')}}</th>
            {% endif %}
            <th class="cell time">{{translate('首次任课时间')}}</th>
            <th class="cell time">{{translate('上一次任课时间')}}</th>
            <th>{{translate('管理')}}</th>
        </tr>
    </thead>
    <tbody>
        {% for t in teachers %}
        <tr class="row-li" id="{{ t.id }}">
            <td class="cell cell-checkbox"><input type="checkbox" {% if t.active == False %}disabled{% endif %}></td>
            <td><a href="/school/teachers/edit/{{ t.id }}">{{ t.name }}</a></td>
            <td><div>{{ t.nick_name or '' }}</div></td>
            <td><a href="/school/teachers/edit/{{ t.id }}"><div>{{ t.username }}</div></a></td>
            {% if t.active == True %}
                <td>{{translate('在职')}}</td>
            {% else %}
                <td style="color:#F00">{{translate('删除')}}</td>
            {% endif %}
            <td>{{ t.phone or '' }}</td>
            {% if not in_user_verify_whitelist %}
            {% if t.is_verified %}
            <td>{{translate('已验证')}}</td>
            {% else %}
                {% if t.active %}
                    <td style="color:#F00"><a href="" class="checkA">{{translate('未验证')}}</a></td>
                {% else %}
                    <td>-</td>
                {% endif %}
            {% endif %}
            {% endif %}
            <td class="cell time">{{ t.first_session_at or '' }}</td>
            <td class="cell time">{{ t.last_session_at or '' }}</td>
            {% if t.active == True %}
                <td class="tools">
                    <span class="glyphicon glyphicon-edit" style="cursor: pointer;"></span>
                    <span class="glyphicon glyphicon-trash" style="cursor: pointer;"></span>
                </td>
            {% else %}
                <td class="cell" style="color:#00F"><a class="restoreteacher" href="">{{translate('还原')}}</a></td>
            {% endif %}
        </tr>
        {% endfor %}
    </tbody>
</table>


{% include "school/pagination.html" %}
</div>
<!--点击删除时的弹框-->
<div class="modal" id="deleteModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{translate('确认删除')}}</h4>
            </div>
            <div class="modal-body">
                <button class="btn btn-danger">{{translate('确认')}}</button>
                <button class="btn btn-default">{{translate('取消')}}</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="checkModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">{{translate('验证手机号码')}}</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{translate('手机号码')}}</label>
                        <div class="col-sm-6">
                            <input type="tel" value="" id="phone" placeholder="{{translate('请输入手机号')}}" class="form-control">
                        </div>
                        <div class="col-sm-3">
                            <button class="btn btn-default" id="sendVerify">{{translate('发送验证码')}}</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">{{translate('验证码')}}</label>
                        <div class="col-sm-6">
                            <input type="tel" id="verify" value="" class="form-control" placeholder="{{translate('请输入6位验证码')}}">
                        </div>
                    </div>
                    <p class="tips"></p>
                    <div class="form-group" style="text-align: center;">
                        <button class="btn btn-default" id="done" style="width: 80px;margin-right: 30px;">{{translate('确定')}}</button>
                        <button class="btn btn-default" style="width: 80px" data-dismiss="modal">{{translate('取消')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
    $(function(){
        var countDown = 60;
        var isCounting = false;
        var t;
        var isSent = false;
        var tid = '';

        function change_url_by_stat() {
            var value = document.getElementById("teacherselect").value;
            if (value == "all") {
                window.location.href = "{{ url_for('school.list_teachers', stat='all') }}";
            }
            else if (value == "deleted") {
                window.location.href = "{{ url_for('school.list_teachers', stat='deleted') }}";
            }
            else if (value == "onboard") {
                window.location.href = "{{ url_for('school.list_teachers', stat='onboard') }}";
            }
            else {
                alert("should not alert this...");
            }
        }
        //验证手机号部分
        function setTime(val){//验证码倒计时
          if(isCounting){
              val.attr('disabled','disabled');
              val.addClass('btn-disable');
              val.html('{{translate("在")}}'+countDown+'{{translate("秒后重新发送")}}');
              countDown--;
              if(countDown<0){
                  isCounting = false;
                  countDown = 60;
              }
          }else{
              val.removeAttr('disabled');
              val.removeClass('btn-disable');
              val.html('{{translate("发送验证码")}}');
              clearTimeout(t);
              return false;
          }
          t = setTimeout(function(){
              setTime(val);
          },1050);
        }

        function clearForm(){//清除表单
            $('#phone').val('');
            $('#verify').val('');
            $('#sendVerify').removeAttr('disabled');
            $('#sendVerify').removeClass('btn-disable');
            $('#sendVerify').html('{{translate("发送验证码")}}');
            clearTimeout(t);
            countDown = 60;
            tid = '';
        }

        $('form button').click(function(e){//取消form表单的自动提交
            e.preventDefault();
        });

        $('.checkA').click(function(e){//打开弹出框
            e.preventDefault();
            clearForm();
            $('#checkModal').modal('show');
            tid = $(this).parent().parent()[0].id;
        });

        $('#sendVerify').click(function(){//发送验证码
            var $this = $(this);
            var phone = $.trim($('#phone').val());
            var pReg = new RegExp('^[0-9]{11}$')
            if(pReg.test(phone)){
                $.post('/school/teachers/check_phone',{'phone':phone},function(data){
                    var d = JSON.parse(data);
                    if(d.code == 0){
                        $.post('/vcode/send_vcode',{'phone':phone},function(data){
                            var da = JSON.parse(data);
                            if(da.meta.code == 0){
                                isCounting = true;
                                setTime($this);
                                isSent = true;
                            }else{
                                if(da.meta.code == 1){
                                    kalert('{{translate("验证码不正确，请重新输入")}}');
                                }else if(da.meta.code == 2){
                                    kalert('{{translate("发验证码失败，请稍后再试")}}');
                                }
                            }
                        });
                    }else{
                        kalert('{{translate("输入的手机号已经被占用，请检查后重新输入！")}}')
                    }
                });
            }else{
                if(phone == ''){
                    kalert('{{translate("请输入手机号！")}}')
                }else{
                    kalert('{{translate("输入的手机号不符合规范！")}}')
                }
            }

        });

        $('#done').click(function(){ //完成
            var phone = $.trim($('#phone').val());
            var ver = $.trim($('#verify').val());
            var vReg = new RegExp('^[0-9]{6}$');
            if(isSent){
                if(vReg.test(ver)){
                    $.post('/school/teachers/verified',{
                        'tid': tid,
                        'phone': phone,
                        'vcode': ver
                    },function(data){
                        var d = JSON.parse(data);
                        if(d.code == 0){
                            $('#checkModal').modal('hide');
                            kalert('{{translate("验证成功")}}');
                            setTimeout(function(){
                                window.location.reload();
                            },2000)
                        }else{
                            kalert('{{translate("验证码错误或已过期")}}')
                        }
                    });
                }else{
                    kalert('{{translate("请输入正确的6位短信验证码")}}')
                }

            }else{
                kalert('{{translate("请先输入手机获取短信验证码！")}}')
            }
        })
//验证手机号完成


        $('#deleteModal .modal-body button').bind('click',function(){
            $('div.modal').modal('hide');
        });

        $('#createnew').bind('click',function(){
            window.location.href = "{{ url_for('school.create_teacher') }}";
        });

        $('.glyphicon-edit').bind('click', function(){
            var tid = $(this).parent().parent().attr('id');
            var url = "/school/teachers/edit/" + tid;
            window.location.href = url;
        });

        $('a.restoreteacher').bind('click', function() {
            $.ajaxSetup({   
                async : false  
            });
            tid = $(this).parent().parent().attr('id');
            url = "/school/teachers/restore/" + tid;
            if(localStorage.lang == 'lang=en'){
                url += '?'+localStorage.lang
            }
            $.post(url, function(data) {
                if (data['code'] != 0) {
                    alert(data['msg']);
                }
            }, 'json');
        });

        $('span.glyphicon-trash').bind('click', function(){
            $('#deleteModal').modal('show');
            tid = $(this).parent().parent().attr('id');

            $('.modal-body button.btn-danger').bind('click', function(){
                var url = '/school/teachers/delete/' + tid;
                $.post(url, function(data){
                    if (data['code']!=0){
                        alert(data['msg']);
                    }
                    change_url_by_stat();
                }, 'json');
            });
        });

        $('#teacherselect').bind('change', function() {
            change_url_by_stat();
        })

        // click delete all
        $('#deleteall').click(function(){
            var ids = [];
            $('.row-li :checked').each(function(){
                ids.push($(this).parent().parent().attr('id'));
            });
            if (!ids.length) {
                kalert('{{translate("请点击复选框选中要删除的老师")}}');
                return;
            }
            $('#deleteModal').modal('show');

            var data = {
                'ids': ids
            };

            // click modal alert confirm button
            $('.modal-body button.btn-danger').bind('click',function(){
                var url = '/school/teachers/muti_delete';
                $.post(url, data=data, function(data){
                    if (data['code']!=0){
                        alert(data['msg']);
                    }
                    change_url_by_stat();
                }, 'json');
            });
        });
    });
</script>
{% endblock %}
